<template>
  <div class="dom-node">
    <div class="name-line">
      <div style="display: flex; align-items: center">
        <!-- <div style="font-size: 18px" :contenteditable="changeName">
          {{ modelName }}
        </div>
        <i
          v-if="!changeName && actionTag !== 'view'"
          class="el-icon-edit-outline"
          @click="changeName = true"
        ></i>
        <i
          v-if="changeName"
          class="el-icon-circle-check"
          @click="changeName = false"
        ></i> -->
      </div>
      <div class="action-group">
        <!-- <el-upload
            v-if="actionTag !== 'view'"
            action="1"
            style="width: 60px; height: 50px; overflow: hidden"
          >
            <span class="group-btn"
              ><i class="el-icon-upload2"></i><span>导入</span></span
            >
          </el-upload> -->
        <span class="group-btn" @click="daochu">
          <i class="el-icon-download"></i><span>导出</span></span
        >
        <span class="group-btn" v-if="!islianxian" @click="lianxian"
          ><i class="el-icon-minus"></i> <span>连线</span></span
        >
        <span class="group-btn" v-else @click="lianxian">
          <i style="color: #409eff" class="el-icon-minus"></i>
          <span style="color: #409eff">连线</span></span
        >
        <!-- <span class="group-btn">
          <el-tooltip
            class="item"
            effect="dark"
            content="Ctrl+鼠标拖动框选"
            placement="top"
          >
            <span class="group-btn">
              <i class="el-icon-full-screen"></i><span>框选</span></span
            >
          </el-tooltip>
        </span> -->
        <span
          class="group-btn"
          v-if="actionTag !== 'view'"
          draggable
          @dragstart="handleDragstart"
          @dragend="handleDragEnd"
          ><i class="el-icon-circle-plus-outline"></i><span>节点</span></span
        >
        <span class="group-btn" @click="fabu" v-if="actionTag !== 'view'"
          ><i class="el-icon-position"></i><span>保存</span></span
        >
      </div>
    </div>
    <div class="model-main">
      <div class="left-node" id="ErCode" ref="ErCode"></div>
      <div class="right-tabs">
        <el-tabs v-model="activeName">
          <!-- <el-tab-pane label="基本信息" name="first">
     
          </el-tab-pane> -->
          <el-tab-pane
            label="结构信息"
            name="first"
            :disabled="activeName == 'third'"
          >
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
              <el-form-item label="名称" prop="label">
                <el-input
                  v-model="form.label"
                  placeholder="请输入名称"
                  :disabled="actionTag == 'view'"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="编码" prop="code">
                <el-input
                  v-model="form.code"
                  placeholder="请输入编码"
                  :disabled="actionTag == 'view'"
                ></el-input> 
              </el-form-item> -->
              <el-form-item label="描述" prop="textarea">
                <el-input
                  type="textarea"
                  :rows="2"
                  :disabled="actionTag == 'view'"
                  placeholder="请输入内容"
                  v-model="form.textarea"
                >
                </el-input>
              </el-form-item>
            </el-form>
            <el-button
              type="primary"
              size="small"
              style="float: right; margin-bottom: 10px"
              v-if="activeName == 'first'"
              :disabled="!jiegouTable.length"
              @click="xinzeng"
            >
              新增
            </el-button>
            <el-table
              height="55vh"
              :data="jiegouTable"
              style="width: 95%; margin: 0 auto"
            >
              <el-table-column type="selection" width="55" v-if="selectState">
              </el-table-column>
              <el-table-column prop="label" label="名称" align="center">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <p v-if="!scope.row.isEdit">
                      {{ scope.row.label }}
                    </p>
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.label"
                    ></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="code" label="主键" align="center">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <el-checkbox-group v-model="scope.row.code">
                      <el-checkbox
                        label=""
                        name="type"
                        :disabled="!scope.row.isEdit"
                      ></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="数据类型" align="center">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <p v-if="!scope.row.isEdit">{{ scope.row.type }}</p>
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.type"
                    ></el-input>
                  </div> </template
              ></el-table-column>
              <el-table-column prop="length" label="长度" align="center">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <p v-if="!scope.row.isEdit">{{ scope.row.length }}</p>
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.length"
                    ></el-input>
                  </div> </template
              ></el-table-column>
              <el-table-column prop="jingdu" label="精度" align="center">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <p v-if="!scope.row.isEdit">{{ scope.row.jingdu }}</p>
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.jingdu"
                    ></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="default" label="默认值" align="center">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <p v-if="!scope.row.isEdit">{{ scope.row.default }}</p>
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.default"
                    ></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="不可空" align="center">
                <template slot-scope="scope">
                  <el-checkbox-group v-model="scope.row.emptyAble">
                    <el-checkbox
                      label=""
                      name="type"
                      :disabled="!scope.row.isEdit"
                    ></el-checkbox>
                  </el-checkbox-group>
                </template>
              </el-table-column>
              <el-table-column prop="desc" label="描述" align="center">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <p v-if="!scope.row.isEdit">{{ scope.row.desc }}</p>
                    <el-input
                      v-if="scope.row.isEdit"
                      v-model="scope.row.desc"
                    ></el-input>
                  </div> </template
              ></el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="100"
                v-if="actionTag !== 'view'"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="!scope.row.isEdit"
                    @click="edit(scope.row)"
                    type="text"
                    size="small"
                  >
                    编辑
                  </el-button>
                  <!-- <el-button
                    v-if="scope.row.isEdit"
                    @click="baocunrow(scope.row)"
                    type="text"
                    size="small"
                  >
                    保存
                  </el-button> -->
                  <el-button
                    @click="delColum(scope.row, scope.$index)"
                    type="text"
                    size="small"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button
              type="primary"
              style="margin-top: 20px"
              v-if="actionTag !== 'view'"
              @click="baocun"
              >保存</el-button
            >
          </el-tab-pane>
          <el-tab-pane
            label="关联"
            name="third"
            :disabled="activeName == 'first'"
          >
            <el-table :data="foreignKeyTable" style="width: 100%">
              <el-table-column label="外键名称" width="180">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.foreignKey"
                    placeholder="请输入外键名称"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="字段" width="180">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.field"
                    placeholder="请输入字段"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="被参考表">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.beiCankao"
                    placeholder="请输入被参考表"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.cankaoField"
                    placeholder="请输入参考字段"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="80"
                v-if="actionTag !== 'view'"
              >
                <template slot-scope="scope">
                  <el-button
                    @click="baocunkey(scope.row)"
                    type="text"
                    size="small"
                  >
                    保存
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <div class="right-top-btn" v-if="actionTag !== 'view'">
          <!-- <el-button
            type="danger"
            size="small"
            v-if="!selectState && activeName == 'second'"
            :disabled="!jiegouTable.length"
            @click="qiehuanxuenze"
          >
            批量删除
          </el-button> -->
          <el-button
            type="danger"
            size="small"
            :disabled="!jiegouTable.length"
            @click="delNode"
            >删除</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import G6 from "@antv/g6";
// let data1 = {
//   nodes: [
//     {
//       id: "node2",
//       label: "一个节点",
//       code: "unicode",
//       textarea: "优秀班级学员成绩统计",
//       columns: [
//         {
//           label: "id1",
//           code: "unicode",
//           type: "number",
//           length: "10",
//           jingdu: "3",
//           default: "id",
//           emptyAble: false,
//           desc: "列字段的描述",
//           isEdit: false,
//         },
//         {
//           label: "name",
//           code: "unicode",
//           type: "varchar",
//           length: "20",
//           jingdu: "3",
//           default: "name",
//           emptyAble: true,
//           desc: "列字段的描ffdsa述",
//           isEdit: false,
//         },
//         {
//           label: "sc",
//           code: "unicode",
//           type: "varchar",
//           length: "50",
//           jingdu: "2",
//           default: "sc",
//           emptyAble: false,
//           desc: "列字段的描述aaaaa",
//           isEdit: false,
//         },
//       ],
//     },
//   ],
// };
export default {
  data() {
    return {
      actionTag: "add",
      rules: {
        label: [{ required: true, message: "请输入名称", trigger: "blur" }],
        // code: [{ required: true, message: "请输入编码", trigger: "blur" }],
        textarea: [{ required: true, message: "请输入描述", trigger: "blur" }],
      },
      edges: [],
      offsetX: 0,
      offsetY: 0,
      selectState: false,
      modelName: "未命名",
      changeName: false,
      activeName: "first",
      form: {
        label: "",
        code: "",
        textarea: "",
      },
      jiegouTable: [],
      foreignKeyTable: [
        {
          foreignKey: "",
          field: "",
          beiCankao: "",
          cankaoField: "",
        },
      ],
      data: {
        nodes: [],
        edges: [],
      },
      firstNodeItem: null,
      islianxian: false,
      idObj: { source: null, target: null },
      selectModel: null,
    };
  },
  beforeDestroy() {
    this.edges = [];
    this.data = {
      nodes: [],
      edges: [],
    };
  },
  mounted() {
    this.initG6();
  },
  methods: {
    initG6() {
      let that = this;
      G6.registerNode(
        "customNode",
        {
          options: {
            stateStyles: {
              selected: {
                fill: "#0077bb",
              },
            },
          },
          afterDraw(cfg, group) {
            const size = cfg.size;
            const width = size[0];
            const height = size[1];
            group.addShape("rect", {
              attrs: {
                x: -width / 2, // 左右
                y: height / 2, // 上下
                width: width,
                height: cfg.columns.length * 20,
                fill: "#0077bb",
                cursor: "pointer",
              },
              draggable: true,
              name: "根据列名的长度延申背景",
            });
            group.addShape("text", {
              attrs: {
                x: 0, // 左右 0 是中间
                y: -6, // 上下
                textBaseline: "top",
                textAlign: "center",
                lineHeight: 20,
                height: 20,
                text: cfg.label,
                fill: "#fff",
                cursor: "pointer",
              },
              draggable: true, // 图形可拖拽
              name: "表名",
            });
            for (let i = 0; i < cfg.columns.length; i++) {
              group.addShape("rect", {
                attrs: {
                  x: -width / 2, // 左右
                  y: 20 + i * 20, // 上下
                  width: width,
                  height: 20,
                  fill: "#0077bb",
                  cursor: "pointer",
                },
                draggable: true,
                name: "列名的白色背景",
              });
              group.addShape("text", {
                attrs: {
                  x: -width / 2 + 15, // 左右
                  y: 20 + i * 20, // 上下
                  textBaseline: "top",
                  lineHeight: 20,
                  height: 20,
                  text: cfg.columns[i].label,
                  fill: "#fff",
                  cursor: "pointer",
                },
                draggable: true, // 图形可拖拽
                name: "字段名",
              });
            }
          },
        },
        "rect"
      );
      const width = document.getElementById("ErCode").clientWidth;
      const height = document.getElementById("ErCode").offsetHeight;
      this.graph = new G6.Graph({
        container: "ErCode",
        width,
        height,
        modes: {
          default: [
            "drag-canvas", // 允许拖拽画布
            "zoom-canvas", //缩放画布
            "drag-node", //拖拽节点
          ],
        },
        defaultNode: {
          type: "customNode",
          size: [200, 20],
          style: {
            stroke: "#0077bb",
            lineWidth: 0,
            fill: "#0077bb",
            radius: [0, 0, 0, 0], // 左上 右上 右下 左下
            border: 0,
          },
          labelCfg: {
            position: "bottom",
            offset: 8,
            border: 0,
            style: {
              fill: "#0077bb",
              fontSize: 12,
            },
          },
        },
        defaultEdge: {
          style: {
            stroke: "#0077bb",
            lineWidth: 2,
            // endArrow: {
            //   path: G6.Arrow.triangle(),
            //   fill: "#0077bb",
            // },
            cursor: "pointer",
          },
        },
        nodeStateStyles: {
          // node style of active state
          active: {
            fillOpacity: 0.8,
          },
          // node style of selected state
          selected: {
            // shadowOffsetX: 0,
            // shadowOffsetY: 15,
            // shadowColor: "#409EFF",
            // shadowBlur: 50,
            opacity: 0.8,
            height: 20,
            fill: "#FFCE51",
          },
          cursor: "pointer",
        },
      });
      this.graph.on("node:click", (ev) => {
        const { item } = ev;
        if (!this.islianxian) {
          if (this.activeName == "third") {
            this.activeName = "first";
            this.foreignKeyTable = [];
          }
          let node = ev.item._cfg;
          console.log(node);
          that.jiegouTable = ev.item._cfg.model.columns;
          that.form = ev.item._cfg.model;
          this.selectModel = node;
        } else {
          const node = ev.item;
          if (!this.firstNodeItem) {
            this.firstNodeItem = ev.item._cfg.id;
          }
          // 鼠标当前点击的节点的位置
          const point = { x: ev.x, y: ev.y };
          const model = node.getModel();
          if (this.addingEdge && this.edge) {
            if (this.firstNodeItem != node._cfg.id) {
              let obj = {
                source: this.firstNodeItem,
                target: node._cfg.id,
              };
              obj.foreignKeyTable = [
                {
                  foreignKey: "",
                  field: "",
                  beiCankao: "",
                  cankaoField: "",
                },
              ];
              let result = this.data.edges.some((item) => {
                if (item.source == obj.source && item.target == obj.target) {
                  return true;
                }
              });
              let result2 = this.data.edges.some((item) => {
                if (item.source == obj.target && item.target == obj.source) {
                  return true;
                }
              });
              if (!result && !result2) {
                this.graph.updateItem(this.edge, {
                  target: model.id,
                });
                this.edges.push(obj);
                this.data.edges = this.edges;
              } else {
                this.graph.removeItem(this.edge);
              }
              console.log(this.data.edges);
            } else {
              this.graph.removeItem(this.edge);
            }
            this.firstNodeItem = null;
            this.edge = null;
            this.addingEdge = false;
          } else {
            // 在图上新增一条边，结束点是鼠标当前点击的节点的位置
            this.edge = this.graph.addItem("edge", {
              source: model.id,
              target: point,
              foreignKeyTable: [
                {
                  foreignKey: "",
                  field: "",
                  beiCankao: "",
                  cankaoField: "",
                },
              ],
            });
            this.addingEdge = true;
          }
        }
      });
      this.graph.on("mousemove", (ev) => {
        if (this.islianxian) {
          // 鼠标的当前位置
          const point = { x: ev.x, y: ev.y };
          if (this.addingEdge && this.edge) {
            // 更新边的结束点位置为当前鼠标位置
            this.graph.updateItem(this.edge, {
              target: point,
            });
          }
        }
      });
      this.graph.on("edge:click", (ev) => {
        // if (!this.islianxian) {
        this.activeName = "third";
        console.log(ev.item._cfg);
        that.foreignKeyTable = ev.item._cfg.model.foreignKeyTable;
        this.idObj = {
          source: ev.item._cfg.model.source,
          target: ev.item._cfg.model.target,
        };
        // } else {
        const currentEdge = ev.item;
        this.firstNodeItem = null;
        // 拖拽过程中，点击会点击到新增的边上
        if (this.addingEdge && this.edge == currentEdge) {
          this.graph.removeItem(this.edge);
          this.edge = null;
          this.addingEdge = false;
          this.activeName = "first";
        }
        // }
        // console.log(this.data);
      });
      // if (this.actionTag === "add") {
      // this.data = { nodes: [] };
      this.graph.read(this.data);
      // } else if (this.actionTag === "edit" || this.actionTag === "view") {
      //   this.graph.read(this.data);
      // }
    },
    edit(row) {
      row.isEdit = true;
    },
    lianxian() {
      this.islianxian = !this.islianxian;
      if (this.edge) {
        this.graph.removeItem(this.edge);
        this.edge = null;
        this.addingEdge = false;
        this.activeName = "first";
      }
    },
    xinzeng() {
      this.jiegouTable.push({
        label: "",
        code: "",
        type: "",
        length: "",
        jingdu: "",
        default: "",
        emptyAble: "",
        desc: "",
        isEdit: true,
      });
    },
    qiehuanxuenze() {
      this.selectState = true;
    },
    delNode() {
      if (this.selectModel) {
        this.$alert("确定删除该节点吗？", "确认框", {
          confirmButtonText: "确定",
          callback: (action) => {
            console.log(action);
            if (action == "cancel") {
              this.selectState = false;
              return;
            }
            if (this.edge) {
              this.graph.removeItem(this.edge);
              this.edge = null;
              this.addingEdge = false;
              this.activeName = "first";
            }

            const loading = this.$loading({
              lock: true,
              text: "Loading",
              spinner: "el-icon-loading",
              background: "rgba(0,0,0,0.7)",
            });
            let timmer = setTimeout(() => {
              const node = this.graph.findById(this.selectModel.id);
              console.log(this.graph);
              this.graph.removeItem(node);
              this.selectModel = null;
              let nodes = this.graph.getNodes();
              let edges = this.graph.getEdges();
              console.log(edges);
              let nodeArr = nodes.map((res) => {
                return { ...res._cfg.model };
              });
              let edgeArr = edges.map((res) => {
                return { ...res._cfg.model };
              });
              this.data = { nodes: nodeArr, edges: edgeArr };
              this.graph.read(this.data);
              this.jiegouTable = [];
              this.form = {
                label: "",
                code: "",
                textarea: "",
              };
              loading.close();
              this.selectState = false;
              this.$message({
                message: "删除成功",
                type: "success",
              });
              clearTimeout(timmer);
            }, 600);
          },
        });
      } else {
        this.$message({
          message: "请选中一个节点进行保存",
          type: "error",
        });
      }
    },
    delColum(row, index) {
      this.$alert("确定删除此行吗？", "确认框", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "cancel") {
            loading.close();
            clearTimeout(timmer);
            return;
          }
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0,0,0,0.7)",
          });
          let timmer = setTimeout(() => {
            if (this.jiegouTable.length > 1) {
              this.jiegouTable.splice(index, 1);
              this.graph.render(this.data);
              this.jiegouTable.forEach((res) => {
                res.isEdit = false;
              });
              this.$message({
                message: "删除成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "删除失败，结构信息至少保留一条数据",
                type: "error",
              });
            }

            loading.close();

            clearTimeout(timmer);
          }, 600);
        },
      });
    },
    daochu() {
      this.graph.downloadFullImage("file", "image/jpeg", {
        backgroundColor: "#fff",
      });
    },
    baocun() {
      if (this.selectModel) {
        if (this.edge) {
          this.graph.removeItem(this.edge);
          this.edge = null;
          this.addingEdge = false;
          this.activeName = "first";
        }
        this.$refs.form.validate((valid) => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: "Loading",
              spinner: "el-icon-loading",
              background: "rgba(0,0,0,0.7)",
            });
            let timmer = setTimeout(() => {
              this.graph.render(this.data);
              this.jiegouTable.forEach((res) => {
                res.isEdit = false;
              });
              loading.close();
              clearTimeout(timmer);
            }, 600);
          } else {
            return false;
          }
        });
      } else {
        this.$message({
          message: "请选中一个节点进行保存",
          type: "error",
        });
      }
    },
    baocunrow(row) {
      row.isEdit = false;
      this.graph.render(this.data);
    },
    baocunkey(row) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0,0,0,0.7)",
      });
      let timmer = setTimeout(() => {
        console.log(this.data.edges);
        if (this.idObj.target && this.idObj.source) {
          this.data.edges.forEach((res) => {
            if (
              res.source == this.idObj.source &&
              res.target == this.idObj.target
            ) {
              res.foreignKeyTable = [row];
            }
          });
          this.graph.render(this.data);
        }
        loading.close();
        clearTimeout(timmer);
      }, 600);
    },
    handleDragstart(e) {
      this.offsetX = e.offsetX;
      this.offsetY = e.offsetY;
    },
    handleDragEnd(e) {
      let canvas = this.$refs.ErCode.getElementsByTagName("canvas")[0];
      let ctx = canvas.getContext("2d");
      let jiange = canvas.getBoundingClientRect();
      ctx.rect(0, 0, canvas.width, canvas.height);
      if (ctx.isPointInPath(e.clientX - jiange.left, e.clientY - jiange.top)) {
        var code = "";
        for (var i = 0; i < 2; i++) {
          var radom = Math.floor(Math.random() * 10);
          code += radom;
        }
        console.log(e.x, e.y);
        // 将屏幕/页面坐标转换为渲染坐标
        const xy = this.graph.getPointByClient(e.x, e.y);
        let model = {
          id: code,
          label: "",
          code: "",
          textarea: "",
          columns: [
            {
              label: "",
              code: "",
              type: "",
              length: "",
              jingdu: "",
              default: "",
              emptyAble: true,
              desc: "",
              isEdit: false,
            },
          ],
          x: xy.x,
          y: xy.y,
          offsetX: this.offsetX,
          offsetY: this.offsetY,
        };
        this.data.nodes.push(model);
        this.graph.addItem("node", model);
        this.graph.fitView = true;
      }
    },
    fabu() {
      console.log(this.data);
    },
  },
};
</script>
  
  <style lang="less">
.name-line {
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  background-color: #e7f0fb;
  display: flex;
  align-items: center;
  position: relative;
  // justify-content: space-between;
  .action-group {
    display: flex;
    margin-left: 50px;
    .el-upload {
      display: block;
    }
    .group-btn {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 50px;
      width: 60px;
      font-size: 14px;
      text-align: center;
      line-height: 25px;
      i {
        height: 25px;
        width: 28px;
        font-size: 24px;
      }
    }
  }
  .back-btn {
    position: absolute;
    right: 20px;
    // margin-left: 400px;
  }
}
.model-main {
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 60px);
  padding: 10px;
  box-sizing: border-box;
  .left-node {
    width: 60%;
    height: 100%;
  }
  .right-tabs {
    width: 40%;
    position: relative;
    padding: 10px;
    border-left: 1px solid #b9bfc6;
    .right-top-btn {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
</style>
  